<template>
  <div style="color: #666;font-size: 14px;">
    <div style="padding-bottom: 20px">
      <b>欢迎用户：{{ user.nickname }}</b>
    <el-card>
      <div style="margin: 20px 0;font-size: 20px">{{new Date().getFullYear()+'年' +(new Date().getMonth()+1)+'月'+new Date().getDate()+'日'}}</div>
      <div style="width: 200px;height: 200px; line-height: 200px;border-radius: 50%;background-color: #1E90FF;
       font-size: 50px;color: #ffffff;text-align: center;cursor: pointer;box-shadow: 0 0 30px rgba(0,0,0,.2);" @click="sign">
       打卡
      </div>
    </el-card>
    </div>

    <div style="height: 1px; background: #ddd; margin: 20px 0"/>
    <el-card style="margin: 10px 0">
      <div style="padding-bottom: 20px; font-size: 24px"> 系 统 公 告</div>
      <el-collapse accordion v-for="(item, index) in noticeRich">
        <el-collapse-item :name="index + ''">
          <template slot="title">
            <span style="font-size: 20px; color: #E6A23C">{{ item.name }}</span><i style="color: #E6A23C" class="header-icon el-icon-info"></i>
            <span style="margin-left: 20px">{{ item.time }}</span>
          </template>
          <div>
            <div style="padding: 10px 0"><el-image :src="item.img"></el-image></div>
            <div v-html="item.content"></div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      activeNames: ['0'],
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      notice: [],
      noticeRich: [],
    }
  },
  mounted(){
//获取地理位置
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
      if(this.getStatus() == BMAP_STATUS_SUCCESS) {
        var mk = new BMap.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);
        alert('您的位置：' + r.point.lng + ',' + r.point.lat);
      }
      else {
        alert('failed' + this.getStatus());
      }
    });
  },
  methods:{
    sign(){
      const location = localStorage.getItem("location")
      const username= this.user.username
      this.request.post("/sign",{user : username,location : location }).then(res=>{
        if (res.code === '200') {
          this.$message.success("打卡成功")
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  },
  created() {
    // 简单公告
    this.request.get("/notice/type/1").then(res => {
      this.notice = res.data.splice(0, 5)
    })

    this.request.get("/notice/type/2").then(res => {
      this.noticeRich = res.data.splice(0, 5)
    })
  }
}

</script>
